<template>
    <div class="app">
        <list>
            <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
                     :display="refreshing ? 'show' : 'hide'">
                <text class="indicator-text">{{refreshTitle}}</text>
            </refresh>
            <cell v-for="(num, i) in orderList" :key="i">
                <order @refreshClick="refreshClick" :orderData="num"></order>
            </cell>
            <cell style="flex: 1;">
                <noData v-if="orderList.length == 0" subTitle="可以去看看有哪些想买的" noDataText="您还没有相关的订单"></noData>
            </cell>
            <loading v-if="orderList.length>=5" class="loading" @loading="onloading"
                     :display="loadinging ? 'show' : 'hide'">
                <text class="indicator-text" style="padding-bottom: 20px;">加载中...</text>
            </loading>
        </list>
    </div>
</template>

<script>
    import {
        list
    } from '../../../../api/order';
    import order from '../../../../components/order/list.vue';
    import noData from '../../../../components/noData/noData.vue'
    const eeui = app.requireModule('eeui');
    const modal = app.requireModule('modal');
    export default {
        data() {
            return {
                statusBarHeight: eeui.getStatusBarHeightPx(),
                pageNum: 1,
                pageSize: 5,
                orderList: [],
                paymentStatus: 1, // 付款状态
                shippingStatus: 0, // 配送状态
                orderStatus: 1, // 订单状态
                refreshing: false,
                loadinging: false,
				refreshTitle:'释放刷新页面...'
            }
        },
        created() {
            this.loadList()
        },
        components: {
            order,noData
        },
        methods: {
            loadList() {
                var _this = this;
                eeui.loading();
                list({
                    pageNum: _this.pageNum,
                    pageSize: _this.pageSize,
                    paymentStatus: _this.paymentStatus, // 付款状态
                    shippingStatus: _this.shippingStatus, // 配送状态
                    orderStatus: _this.orderStatus, // 订单状态
                    mchId: _this.getGlobalData().mchId
                }).then(
                    res => {
                        console.log(res)
                        if (res.type == 'success') {
                            res.data.data.forEach(function (item) {
                                item.itemList.forEach(function (items) {
                                    items.thumbnail = _this.thumbnail(items.thumbnail, 170, 170)
                                })
                                _this.orderList.push(item)
                            })
                            _this.loading = _this.pageSize <= res.data.data.length;
                            eeui.loadingClose();
                        } else {
                            eeui.loadingClose();
                        }
                    }
                ).catch(error => {
                    eeui.loadingClose();
                    console.log(error)
                })
            },
            onrefresh(event) {
                var _this = this
                console.log('下拉完成')
                this.refreshing = true
				this.refreshTitle = '加载中...'
                setTimeout(() => {
                    _this.pageNum = 1;
                    _this.orderList = []
                    _this.loadList()
                    _this.refreshing = false
                }, 2000)
            },
            onpullingdown(event) {
                console.log('下拉了')
				this.refreshTitle = '释放刷新页面...'
            },
            onloading(event) {
                var _this = this
                this.loadinging = true
                setTimeout(() => {
                    if (_this.loading == true) {
                        _this.pageNum = this.pageNum + 1;
                        _this.loadList()
                    }
                    _this.loadinging = false
                }, 2000)
            },
            refreshClick() {
                this.orderList = []
                this.loadList()
                console.info('刷新')
            },
        }
    }
</script>

<style scoped>
    .app {
        flex: 1;
    }

    .refresh {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .loading {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .indicator-text {
        color: #888888;
        font-size: 22px;
        text-align: center;
		padding-top: 20px;
    }

    .indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }
</style>

